<!DOCTYPE html>
<html>

<head>
<title>HTML5 Slideshow</title>

<script type="text/javascript">

var PicN = 5;
var i = 0;
var k = 2;


function init () {

var PicCont = document.getElementById("PicContainer");
var Pics = PicCont.getElementsByTagName("img")[0].style.zIndex = 2;


}


function StopAutoplay () {

clearTimeout(Timer);
}

function Autoplay () {

if (i<PicN-1)

{

var PicCont = document.getElementById("PicContainer");



i++;

var Pics = PicCont.getElementsByTagName("img")[i].style.zIndex = k;

Timer= setTimeout ("Autoplay()",1000);


}


if (i==PicN-1)
{
i = 0;

   for (r=0; r<PicN;r++)
   {
    var Pics = PicCont.getElementsByTagName("img")[r].style.zIndex = 1;
   }
}


}


function Next () {

   if (i<PicN-1)

   {
   
   
   

   var PicCont = document.getElementById("PicContainer");
   var Pics1 = PicCont.getElementsByTagName("img")[i].style.zIndex = 3;
   var Pics2 = PicCont.getElementsByTagName("img")[i].id = "PictureNext";
   
   i++;
   var Pics4 = PicCont.getElementsByTagName("img")[i].id = "Pictures";
   var Pics3 = PicCont.getElementsByTagName("img")[i].style.zIndex = 2;
  


        
   }

}


function Previous () {


if ( i>0)

{


var PicCont = document.getElementById("PicContainer");

var Pics1 = PicCont.getElementsByTagName("img")[i].id = "PicturePrevious";
var Pics2 = PicCont.getElementsByTagName("img")[i].style.zIndex = 3;
i--;
var Pics4 = PicCont.getElementsByTagName("img")[i].id = "Pictures";
var Pics3 = PicCont.getElementsByTagName("img")[i].style.zIndex = 2;

}

}

</script>



<style type="text/css"> 

#PictureNext {
  
   
	
   -webkit-transition-property:top, width;  
   -webkit-transition-duration: 2s, 2s;  
   -webkit-transition-timing-function: (0.42,0,1,1), (0.25,0.1,0.25,1); 
	width:150px;
	height:150px;
	position:absolute;
	left:300px;
	top:500px;

	}


#PicturePrevious {

		
	-webkit-transition-property:top, width;  
   -webkit-transition-duration: 2s, 2s;  
   -webkit-transition-timing-function: (0.42,0,1,1), (0.25,0.1,0.25,1); 
	width:150px;
	height:150px;
	position:absolute;
	left:300px;
	top:500px;

	}


#Pictures {
   
   z-index:1;
	width:300px;
	height:150px;
	position:absolute;
	left:300px;
	top:300px;

   }

#PicHidder {
	
	position:absolute;
	left:300px;
	top:450px;
	 width:300px;
	 height:250px;
	 background-color:black;
	 z-index:20;
	 }

</style>


</head>

<body style="background-color:black" onload="init()">


<div id="PicHidder">

</div>


<div id="PicContainer">
<img  id="Pictures"  src="Marissa Miller/1.jpg" />
<img  id="Pictures"  src="Marissa Miller/2.jpg" />
<img  id="Pictures"  src="Marissa Miller/3.jpg" />
<img  id="Pictures"  src="Marissa Miller/4.jpg" />
<img  id="Pictures"  src="Marissa Miller/5.jpg" />

</div>

<a id="Next" href="javascript:Next()">
<img style="position:absolute; left:600px; top:350px; width:30px; height:30px;" src="Marissa Miller/Next.png" />
</a>

<a id="Previous" href="#" onclick="Previous()">
<img style=" position:absolute; left:260px; top:350px; width:30px; height:30px;" src="Marissa Miller/Previous.png" />
</a>

<a id="Next" href="javascript:Autoplay()">
<img style="position:absolute; left:200px; top:150px; width:30px; height:30px;" src="Marissa Miller/Next.png" />
</a>

<a id="Next" href="#" onclick="StopAutoplay()">
<img style="position:absolute; left:230px; top:145px; width:40px; height:40px;" src="Marissa Miller/Pause.png" />

</a>



</body>

</html>
